<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btnList="fullInfo.btnList"
    >
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
          />
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="receiveAddressModify">
import PageForm from '@/components/PageForm/index'
import { createReceiveAddress, updateReceiveAddress } from '@/api/core.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  tableRow: {
    type: Object,
    default: {},
  },
})

// 表单相关
const formInfo = reactive({
  ref: null,
  data: {},
  fieldList: [
    { label: '联系人', value: 'contacts', type: 'input' },
    { label: '联系电话', value: 'contactsPhone', type: 'input' },
    { label: '省/市/区', value: 'cities', type: 'city-model' },
    {
      label: '详细地址',
      value: 'address',
      type: 'textarea',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
    {
      label: '是否默认',
      value: 'isDefault',
      type: 'radio-model',
      required: true,
      code: 'yes_or_no',
    },
  ],
  rules: {
    cities: [
      {
        type: 'array',
        required: true,
        message: '请选择地址',
        trigger: 'change',
      },
    ],
    isDefault: [
      {
        required: true,
        message: '请选择是否默认',
        trigger: 'change',
      },
    ],
    contactsPhone: [{ validator: proxy.$validate.cellphone, trigger: 'blur' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  },
  labelWidth: '100px',
})
const fullInfo = reactive({
  btnList: [{ label: '保存', event: save, show: true }],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  if (props.tableRow.id) {
    formInfo.data = {
      ...props.tableRow,
      cities: [
        props.tableRow.province,
        props.tableRow.city,
        props.tableRow.county,
      ],
    }
  }
})

function save() {
  formInfo.ref.validate((valid) => {
    if (valid) {
      const params = {
        ...formInfo.data,
        province: formInfo.data.cities[0],
        city: formInfo.data.cities[1],
        county: formInfo.data.cities[2],
      }
      const api = props.tableRow.id
        ? updateReceiveAddress
        : createReceiveAddress
      api(params).then((res) => {
        if (res.success) {
          showDialog.value = false
          emit('returnModify')
        }
      })
    }
  })
}
</script>

<style scoped></style>
